<template>
  <el-container class="flow-info-container">
    <el-main>
      <!-- 终止流程 -->
      <div class="form-single-fragment" style="position: relative;">
        <el-form
          ref="form"
          :model="formData"
          class="full-width-input"
          :rules="rules"
          style="width: 100%;"
          label-width="100px"
          :size="defaultFormItemSize"
          label-position="right"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="终止原因" prop="reason">
                <el-input
                  v-model="formData.reason"
                  class="input-item"
                  type="textarea"
                  :clearable="true"
                  placeholder="终止原因"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row class="no-scroll flex-box" type="flex" justify="end">
                <el-button
                  type="primary"
                  :size="defaultFormItemSize"
                  :plain="true"
                  @click="onCancel(false)"
                >
                  取消
                </el-button>
                <el-button
                  type="primary"
                  :size="defaultFormItemSize"
                  @click="onSubmit()"
                >
                  保存
                </el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { FlowOperationController } from '@/api/flowController.js'

export default {
  props: {
    processInstanceId: {
      type: String,
      required: true
    },
    taskId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        reason: undefined
      },
      rules: {
        reason: [
          {
            required: true,
            message: '请输入终止原因',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        FlowOperationController.stopProcessInstance({
          processInstanceId: this.processInstanceId,
          taskId: this.taskId,
          stopReason: this.formData.reason
        }).then(res => {
          this.onCancel(true)
        }).catch(e => {})
      })
    }
  }
}
</script>

<style  lang="scss">
  .flow-info-container {
    display: flex;

    flex-direction: column;
    margin: 0 auto;
    .blueLink {
      color: #409eff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
    .btnList {
      margin-top:20px;
      display: flex;
      justify-content: right;
      float: right;
      .submitBtn {
        margin-right: 30px;
      }
    }
    .fromFlex {
      height: 36px;
      display: flex;
      align-items: center;
    }
    .base-info {
      display: flex;
      margin-bottom: 20px;
      .basics-info {
        width: 100%;
      }
    }
  }
</style>
